* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    font-size: 32px;
    --card-background-color: #252525;
    --card-color: #727171;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: #242424;
}

li {
    list-style: none;
}

.cards {
    position: relative;
    top: -10vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    position: absolute;
    width: 10vw;
    height: 14vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 0.5rem;
    border: 0.1rem solid #2e2e2e;
    box-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
    color: var(--card-color);
    background-color: var(--card-background-color);
    transition: 0.3s;
}

/* 卡片展开圆弧动画 */
.cards:hover .card {
    /* 设置旋转点为卡片底部中点 */
    transform-origin: bottom center;
    /* 读取卡片各自的css变量设置旋转角度和旋转方向，以及卡片的平移，实现卡片的展开效果 */
    transform: rotate(calc(var(--i) * 5deg)) translate(calc(var(--i) * 6vw), -3vh);
    cursor: pointer;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* hover 卡片时 */
.card:hover {
    color: #b4b3b3;
    background-color: rgb(29, 132, 89);
    border-color: rgb(29, 132, 89);
}

/* 点击卡片时，卡片样式 */
.card:active {
    /* 在变换后，再次变换，不用继续使用 transform，因为同一属性存在覆盖问题，因此要把之前的变换全写上，很麻烦 */
    /* transform: rotate(calc(var(--i) * 5deg)) translate(calc(var(--i) * 6vw), -6vh) !important; */
    translate: calc(var(--i) * 1vw) -3vh;
    color: #b4b3b3;
    z-index: 999;
}

/* 点击卡片时，其他卡片的样式 */
.cards:active .card:not(:active) {
    color: #1e1e1e;
    border-color: rgb(26, 26, 26);
    background-color: #191919;
}

/* 点击旋转动画 */
.reverse {
    animation: flip var(--d) ease-in-out;
    z-index: 999;
}
@keyframes flip {
    0% {
        transform: rotateY(0deg) scale(1.1);
    }
    100% {
        transform: rotateY(720deg) scale(1.5);
    }
}
